<template>
     <!-- detailPage详情页 -->
     <div class="LiuDetailPage">
        <van-sticky>
            <div class="top">
                <van-icon class="prev" name="arrow-left" color="#1989fa" size="16px" @click="back" />
                <div>商品详情</div>
            </div>
        </van-sticky>
        <div class="box">
            <img class="img" :src="msg.small_image" alt="图片加载失败">
            <div class="productInfo">
                <div class="title">{{msg.name}}</div>
                <div class="subTitle">{{msg.spec}}</div>
                <div class="fl">
                    <div class="jg">
                        <div class="originPrice">¥{{msg.price}}</div>
                        <div class="price">¥{{msg.origin_price}}</div>
                    </div>
                    <div class="totalSales">已售:{{msg.total_sales}}</div>
                </div>
                <div class="shippingInfo">此商品按500g/份计价,如实收少于500g将退还差价</div>
                <div class="shippingTime">
                    <van-icon name="clock-o" />
                    最快29分钟内送达
                </div>
            </div>
            <div class="specifications">
                <div class="specificationsTitle">规格</div>
                <div class="conditions">
                    <p>保存条件</p>
                    <p>冷藏</p>
                </div>
                 <div class="conditions">
                    <p>保质期</p>
                    <p>15天</p>
                </div>
            </div>
            <img class="img" :src="msg.small_image" alt="图片加载失败">
            <img class="img" src="https://img.ddimg.mobi/3f280ff77ab3d1571213379189.jpg?width=750&height=1869" alt="图片加载失败">
        </div>
        <div class="bottom">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" />
                <van-goods-action-icon icon="cart-o" text="购物车" />
                <van-goods-action-icon icon="shop-o" text="店铺" />
                <van-goods-action-button type="warning" text="加入购物车"  />
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
        </div>
    </div>
</template>

<script>
export default {
    name:"DetailPage",
    data(){
        return {
            msg:{},
        }
    },
    methods: {
        // 返回一条记录
        back(){
            this.$router.back()
        },
    },
    mounted() {
        this.msg=JSON.parse(sessionStorage.getItem("setDetailPageData"))
        // console.log(this.msg)
    },
}
</script>

<style lang="scss" scoped>
    .LiuDetailPage{
        .top{
            height: 46px;
            line-height: 46px;
            text-align: center;
            color: #323233;
            font-weight: 500;
            font-size: 16px;
            position: relative;
            background: #fff;
            .prev{
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -8px;
                padding: 0 16px;
            }
        }
        .box{
            .img{
                width: 100%;
            }
            .productInfo{
                border-top: .2rem solid #f5f5f5;
                padding: .5rem;
                .title{
                    font-size: .8rem;
                }
                .subTitle{
                    padding: .5rem 0;
                    color: grey;
                    font-size: .6rem;
                }
                .fl{
                    display: flex;
                    justify-content: space-between;
                    .jg{
                        display: flex;
                        .originPrice{
                            color: #e25450;
                            padding-right: .5rem;
                            font-size: .8rem;
                        }
                        .price{
                            color: grey;
                            font-size: 0.5rem;
                            text-decoration: line-through;
                        }
                    }
                    .totalSales{
                        color: #e25450;
                        font-size: .8rem;
                    }
                }
                .shippingInfo{
                    font-size: .6rem;
                    height: .8rem;
                    color: grey;
                    border-top: 1px solid #ebedf0;;
                    border-bottom: 1px solid #ebedf0;;
                    padding: 16px 0;
                    margin: 16px 0;
                }
                .shippingTime{
                    font-size: .6rem;
                    height: .8rem;
                    color: grey;
                }
            }
            .specifications{
                padding-left: .5rem;
                border-top: 1rem solid #f5f5f5;
                border-bottom: 1rem solid #f5f5f5;
                .specificationsTitle{
                    padding-top: 1rem;
                    font-size: 1rem;
                }
                .conditions{
                    display: flex;
                    font-size: .6rem;
                    height: 1rem;
                    color: grey;
                    margin: 16px 0;
                    p{
                        width: 25%;
                    }
                }
            }
        }
        .bottom{
            z-index: 9999;
        }
        // ::deep .van-goods-action{
        //     z-index: 9999;

        // }
    }
</style>